<template>
  <ContentWrap
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
    :bodyStyle="{ height: '100%', padding: '10px' }"
  >
    <el-scrollbar>
      <el-tree :data="paymentList" :props="defaultProps">
        <template #default="{ data }">
          <div class="flex items-center custom-text-16" @click="handleUse(data)">
            <span>{{ data.classiName }}</span>
          </div>
        </template>
      </el-tree>
    </el-scrollbar>
  </ContentWrap>
</template>
<script lang="ts" setup>
/** todo:暂时没有用到了暂时保留 后期不需要就 删除 */
/** 购物车信息 */
import { propTypes } from '@/utils/propTypes'
import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
const emit = defineEmits(['handleUse'])
const props = defineProps({
  paymentMap: propTypes.array.def([])
})

const customNodeClass = ({ payStatus }: TreeNodeData) => (payStatus ? 'is-pay' : '')

const defaultProps = {
  children: 'children',
  label: 'classiName',
  class: customNodeClass
}

const paymentList = computed(() => {
  return props.paymentMap as any
})

const handleUse = (item) => {
  emit('handleUse', item)
}
</script>
<style>
.is-pay > .el-tree-node__content {
  /* border: 1px solid var(--el-color-primary);
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
  background: var(--el-color-primary-light-9);
  border-radius: var(--el-border-radius-base); */
  color: var(--el-color-primary);
}
</style>
<style lang="scss" scoped>
:deep(.el-tree-node__content) {
  height: 40px;
}
</style>
